<template>
<div class="hold-transition">
    <div class="content-header">
        <h1>统计分析</h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>统计分析</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="block">
    <span class="demonstration"></span>
    <el-date-picker
        v-model="dateValue"
        type="monthrange"
        align="right"
        unlink-panels
        value-format="yyyy-MM"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        :picker-options="pickerOptions">
    </el-date-picker>
    <el-button @click="findDateByDateValue" class="dalfBut">查询</el-button>
    </div>

    <div class="app-container">
        <div class="box">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="chart1" style="height:600px;">
            </div>
            <div id="chart2" style="height:600px;">
            </div>
            <div id="chart3" style="height:600px;">
            </div>
        </div>
    </div>
</div>


</template>

<script>
export default {
  data() {
    return {
        pickerOptions: {
          shortcuts: [{
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()]);
            }
          }, {
            text: '今年至今',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        dateValue: [new Date().getFullYear()-1+'-01',new Date().getFullYear()-1+'-12' ],
    };
  },
   mounted:function(){
    this.findDateByDateValue()
    this.findMemberSex()
    this.findMemberAge()
    },

    methods:{
        findMemberAge(){
            this.$http.get("api/report/findMemberAge").then((res)=>{
            if(res.data.flag){
            var myChart3 = this.$echarts.init(document.getElementById("chart3"))
            myChart3.setOption({
            title: {
                text: "会员年龄占比",
                subtext: "",
                x: "center",
            },
            tooltip: {
            //提示框组件
                trigger: "item", //触发类型，在饼形图中为item
                formatter: "{a} <br/>{b} : {c} ({d}%)", //提示内容格式
            },
            legend: {
                orient: "vertical",
                left: "left",
            },
            series: [
                {
                name: "会员年龄占比",
                type: "pie",
                radius: "55%",
                center: ["50%", "60%"],
                data: res.data.data,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                },
                },
            ],
        });
      }else{
        this.$message.error(res.data.message)
      }
    })

        },

        findMemberSex(){
            this.$http.get("api/report/findMemberSex").then((res)=>{
            if(res.data.flag){
            var myChart2 = this.$echarts.init(document.getElementById("chart2"))
            myChart2.setOption({
            title: {
                text: "会员性别占比",
                subtext: "",
                x: "center",
            },
            tooltip: {
            //提示框组件
                trigger: "item", //触发类型，在饼形图中为item
                formatter: "{a} <br/>{b} : {c} ({d}%)", //提示内容格式
            },
            legend: {
                orient: "vertical",
                left: "left",
            },
            series: [
                {
                name: "会员性别占比",
                type: "pie",
                radius: "55%",
                center: ["50%", "60%"],
                data: res.data.data,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                },
                },
            ],
        });
      }else{
        this.$message.error(res.data.message)
      }
    })
    },
        findDateByDateValue(){
             this.$http.get("api/report/memberReportByDate/"+this.dateValue).then((res)=>{
                 this.dateValue = res.data.data.yearAndMonthCurrent
                if(res.data.flag){
                var myChart = this.$echarts.init(document.getElementById("chart1"))
                myChart.setOption({
                        title:{
                            text:'会员数量'
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: res.data.data.memberCounts
                        },
                        xAxis: {
                            type: 'category',
                            data: res.data.data.yearAndMonths
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: res.data.data.memberCounts,
                            name:'会员数量',
                            type: 'line'
                        }]
                })
           }else{
               this.$message.error(res.data.message)
           }
       })
        }
    }
};
</script>
